<!--  -->
<template>
  <div>
    <PageTitle name="个人信息">
      <!-- <el-button type="primary" @click="editFn()">添加权限</el-button> -->
    </PageTitle>

    <div class="des">
      <el-descriptions :column="1">
      <el-descriptions-item label="编号">001</el-descriptions-item>
      <el-descriptions-item label="登录名">{{nickName}}</el-descriptions-item>
      <el-descriptions-item label="角色">{{type}}</el-descriptions-item>
      <el-descriptions-item label="地址">
        北京市朝阳区芍药居幸福花园5栋4单元2201号
        </el-descriptions-item>
  </el-descriptions>
    </div>

  </div>
</template>

<script setup>
import { useStore } from "vuex";
let store = useStore();
const nickName = store.state.user.userInfo.nickName
const type=store.state.user.userInfo.type
import { ElMessage, ElMessageBox } from "element-plus";
import { ref, reactive, getCurrentInstance, onMounted } from "vue";
const { proxy } = getCurrentInstance();
const loading = ref(false);
// 表格格式
const tableCols = [
  { label: "工号", prop: "staffCode" },
  { label: "姓名", prop: "staffName" },
  { label: "性别", prop: "sex" },
  { label: "岗位", prop: "post" },
  { label: "部门", prop: "departmentName" },
  { label: "权限", prop: "staffLimit" },
 
  // { label: "年龄", prop: "age" },
  // { label: "出生日期", prop: "birthday",
  //   type:'Html',
  //   minWidth:'100px',
  //   html:row=>row.birthday?proxy.$moment(row.birthday).format('YYYY-MM-DD'):''
  // },
  // { label: "入职时间", 
  //   prop: "officeTime",
  //   type:'Html',
  //   minWidth:'100px',
  //   html:row=>row.officeTime?proxy.$moment(row.officeTime).format('YYYY-MM-DD'):''
  // },
  {
    label: "操作",
    type: "Button",
    fixed: "right",
    width: "200",
    btnList: [
      {
        type: "primary",
        label: "赋予权限",
        handle: (row) => editFn(row),
      },
      {
        type: "danger",
        label: "删除",
        handle: (row) => del(row.staffId),
      },
    ],
  },
];
const tableData = ref();
const pagination = reactive({
  pageIndex: 1,
  pageSize: 10,
});

const pageChange = (val) => {
  Object.assign(pagination,val)
  query();
};
const query = () => {
  loading.value = true;
  proxy.$api
    .get(`/staff/page/${pagination.pageIndex}/${pagination.pageSize}`)
    .then(res => {
     
      loading.value = false;
      tableData.value = res.records
      pagination.total = res.total;
    })
    .catch(() => {
      loading.value = false;
    });
};
const give = (id) => {
  proxy.$msgbox
    .confirm("是否确定赋予权限?", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    }).then(() => {
      proxy.$api
        .post(`/staff/addPermission/${id}`)
        .then(res => {
          query();
          proxy.$message({
            type: "success",
            message: "赋予权限成功",
          });
        });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消操作！",
      });
    });
};
const del = (id) => {
  proxy.$msgbox
    .confirm("是否确定删除权限?", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    }).then(() => {
      proxy.$api
        .get(`/staff/deletePermission/${id}`)
        .then(res => {
          query();
          proxy.$message({
            type: "success",
            message: "删除成功",
          });
        });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消操作！",
      });
    });
};

const editDialogRef = ref()
const editFn = (row)=>{
  editDialogRef.value.show(row)
}



</script>
<style lang='scss' scoped>
.des{
  padding: 0 32px;
  margin-top: 10px;
  width: 400px;
}
</style>
